{extends file="assets::smarty-templates::Master"|ToPath}
{block name=content}

{html_css file="whiteLabel/light/editor.css"}

<form action="{$action}" method="post">
    <fieldset>
        <dl>
            <label for="add">Para: </label>
            <div>
                <ul id="list" class="emails">
                    {foreach $datos as $email}
                        <li class="email">
                            <button title="Quitar de la lista" class="delete-email small icon right i_cross">{$email[1]}</button>
                            <input type="hidden" value="{$email[2]}" name="{bind name="Emails[]" to="Emails"}" />
                        </li>
                    {/foreach}
                </ul>
                <input id="otroCorreo" class="subject medium"/>
            </div>
        </dl>
        <dl>
            <label for="subject">Asunto:</label> 
            <div><input type="text" name="{bind name="subject" to="Subject"}" class="subject" /><div>
        </dl>
    </fieldset>
    <fieldset>
        <dl>
            <label for="message">Mensaje:</label> 
        </dl>
        <div>
            <textarea cols="" rows="" id="message" name="{bind name="message" to="Message"}" class="editor"></textarea>
        </div>
    </fielset>
    
    <div style="float: right;">
        <button type="submit" class="small icon i_mail">Enviar Mensaje</button>
        <a href="{$cancel}" class="btn small icon i_exclamation">Cancelar</a>
    </div>
</form>

<script type="text/javascript">
    {literal}
    require(["jquery", "jQuery.ui", "WhiteLabel.Editor"], function($) {
        $(document).ready(function($){
            $(".editor").wl_Editor();

            $(".delete-email").live("click", function(){
                $(this).parent().remove();
                return false;
            });

            $('.ui-state-default').hover(
                function(){ $(this).addClass('ui-state-hover'); },
                function(){ $(this).removeClass('ui-state-hover'); }
            );
            $('.ui-state-default').click(function(){ $(this).toggleClass('ui-state-active'); });


           var projects = [
               {/literal}
                   {foreach $listaEstudiantes as $email}
                        {literal}{{/literal}
                            {literal}value: {/literal}"{$email[0]}{$email[1]}",
                            {literal}name: {/literal}"{$email[1]}",
                            {literal}email: {/literal}"{$email[2]}",
                            {literal}code: {/literal}'{$email[0]}'
                        {literal}}{/literal},
                   {/foreach}
               {literal}
            ];

            $( "#otroCorreo" ).autocomplete({
                    minLength: 0,
                    source: projects,
                    focus: function( event, ui ) {
                            $( "#otroCorreo" ).val( ui.item.code + " - " + ui.item.name );
                            return false;
                    },
                    select: function( event, ui ) {
                        var boton = $("<li>").attr("class", "email")
                            .append($("<button>").attr("title","Quitar de la lista").attr("class", "delete-email small icon right i_cross").text(ui.item.name))
                            .append($("<input />").attr("type","hidden").attr("value", ui.item.email).attr("name","Emails[]"));

                        $("#list").append(boton);
                        $( "#otroCorreo" ).val("");
                        return false;
                    }
            }).data( "autocomplete" )._renderItem = function( ul, item ) {
                    return $( "<li></li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + item.code + " - " + item.name + "</a>" )
                            .appendTo( ul );
            };
        });
    });
    {/literal}
</script>

{/block}